<script setup>
	import { onShareTimeline, onShow } from "@dcloudio/uni-app"
	import { ref, onMounted } from "vue"
	import { useShopStore } from '@/store/shop'

	const shopStore = useShopStore( )
	const hdBannerApi = uniCloud.importObject( 'hd_banner' )

	// banner列表数据，默认为空数组
	const bannerList = ref( [ ] )

	// 跳转到商品详情
	const goToDetail = (proId) => {
		uni.navigateTo({
			url: `/pages/productDetail/productDetail?proId=${proId}`
		})
	}

	// 获取banner列表
	const getBannerList = async ( ) => {
		const result = await hdBannerApi.getList( )
		bannerList.value = result.data
	}

	// 开启分享到朋友圈
	// #ifdef MP-WEIXIN
	onShareTimeline( ( ) => {
		return {
			title: shopStore.shopInfo.shop_name || '小圆星店',
			query: '',
			imageUrl: shopStore.shopInfo.shop_avatar
		}
	} )
	// #endif

	onShow( ( ) => {
		getBannerList( )
	} )
</script>

<template>
	<view class="huodong">
		<!-- banner -->
		<view class="banner">
			<swiper class="banner-swiper" circular autoplay :interval="3000" :duration="500">
				<swiper-item v-if="bannerList.length === 0">
					<image class="banner-pic" src="/static/images/banner.png" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item v-else v-for="item in bannerList" :key="item._id">
					<image class="banner-pic" :src="item.banner_pic" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 商品列表 -->
		<view class="proList">
			<!-- 标题 -->
			<view class="title">
				今日活动
			</view>
			<!-- 列表 -->
			<hd-pro @click="goToDetail"></hd-pro>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.huodong {
		height: 100vh;
		background-color: $page-bg-color;

		.banner {
			padding: 24rpx;
			height: 300rpx;

			.banner-swiper {
				width: 100%;
				height: 100%;
			}

			.banner-pic {
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
			}
		}

		.proList {
			padding: 0 24rpx;

			.title {
				color: $text-font-color-2;
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 24rpx;
			}
		}
	}
</style>